import EHeader from '../../common/EHeader';
import ItemTab from '../../common/ItemTab';
import { Row, Col, Spin} from 'antd';
import EcontentItem from './EcontentItem';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { WeaLocaleProvider } from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
@inject('wfCenterStore')
@observer
class Main extends React.Component{
  constructor(props) {
    super(props)
    this.state = {
      currentTab: '',
    }
  }

  componentDidMount() {
    const { getRejectStatisticInfo } = this.props.wfCenterStore;
    getRejectStatisticInfo({}, this.changeState);
  }
  componentWillReceiveProps(nextProps) {
    const { getRejectStatisticInfo } = this.props.wfCenterStore;
    if(this.props.location.key !== nextProps.location.key) {
      getRejectStatisticInfo({}, this.changeState);
    }
  }
  shouldComponentUpdate(nextProps,nextState) {
      return true;
  }
  changeState = (obj={}) => {
    this.setState({
      currentTab: obj.tabs && obj.tabs[0].key
    });
  }
  changeTab = (v) => {
    const { getTabSwitch } = this.props.wfCenterStore;
    this.setState({
      currentTab: v
    })
    getTabSwitch('returnedWf', {key: v})
  }
  render() {
    const { rejectedStatisData, loadingStatusObj:{rejectHasLoaded}} = this.props.wfCenterStore;
    const { tabs=[], datas=[] } = rejectedStatisData;
    const { currentTab } = this.state;
    let tabData = toJS(datas).length > 0 && toJS(datas).filter( v => v.key == currentTab)[0] || [];
    return (
      <div className='wf-center-ele-item'>
        <EHeader ecId={`${this && this.props && this.props.ecId || ''}_EHeader@d4rquh`} title={getLabel( 516702, '退回统计')}/>
        <div className='wf-center-ele-content'>
          <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@x0fg4n`} spinning={!rejectHasLoaded}/>
          <ItemTab ecId={`${this && this.props && this.props.ecId || ''}_ItemTab@5e9lb3`} tabs={tabs} changeTab={this.changeTab} activeTab={currentTab}/>
          {
            rejectHasLoaded && <div className='returnedWf-content-item'>
              <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@828roc`}>
                {
                  tabData.tabInfo && tabData.tabInfo.length >= 0 ? tabData.tabInfo.map( (v, index)=> {
                    return <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@l6d5vb@${index}`} span={12}>
                      <EcontentItem ecId={`${this && this.props && this.props.ecId || ''}_EcontentItem@w91uu0@${index}`} data={v} index={index}/>
                    </Col>
                  }) : (
                    <div className='img-wrap'>
                      <img src='/images/ecology9/workflow/center/nodata.png'/>  
                    </div>
                  )
                }
              </Row>
            </div>
          }
        </div>
      </div>
    ) 
  }
}

export default Main